<template>
  <e-charts :options="options" @mouseover="clearData()" @mouseout="swiper()"/>
</template>

<script setup lang="ts">
import { GET } from '@/api'
import useSettingStore from "@/stores/setting";
import { graphic } from "echarts"

const options = ref({})
let timer:number

const props = defineProps({
  deviceId: {
    type: String,
    default: '',
    required: true
  }
})

onMounted(()=>{
  getData(1)
  swiper()
})

onBeforeUnmount(()=>{
  clearData()
})

watch(
    () => props.deviceId,
    (val: any) => {
      getData(1)
    }
)

function getData(type:number){
  GET("trend", { deviceId: props.deviceId }).then(res => {
    if (res.code === 200) {
      nextTick(() => {
        if (type === 1){
          initOptions(res.xPoints, res.yAllPoints, res.yLeftPoints, res.yMiddlePoints, res.yRightPoints)
        } else {
          updateOptions(res.xPoints, res.yAllPoints, res.yLeftPoints, res.yMiddlePoints, res.yRightPoints)
        }
      })
    } else {
      Window.$message({
        message: res.msg,
        type: "warning",
      })
    }
  })
}

function swiper(){
  if (timer) {
    return
  }
  let looper = () => {
    getData(2)
  }
  timer = setInterval(looper, useSettingStore().echartsAutoTime);
}

function initOptions(xData, yData, yData2,yData3,yData4){
  options.value = {
    xAxis: {
      type: "category",
      data: xData,
      boundaryGap: false, // 不留白，从原点开始
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        // show:false,
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    yAxis: {
      type: "value",
      max: 60,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
      formatter: function (params){
        let tip = params[0].axisValue + "<br />"
        if (params !== null && params.length > 0){
          tip += '<div style="width: 100px;display: flex;flex-flow: row nowrap;justify-content: space-between">'+
              '<div>' +params[0].marker +' '+ params[0].seriesName+ '</div>' +
              '<div>' +params[0].value + 'cm<br>'+ '</div>' +
              '</div>';
          tip += '<div style="width: 100px;display: flex;flex-flow: row nowrap;justify-content: space-between">'+
              '<div>' +params[1].marker +' '+ params[1].seriesName+ '</div>' +
              '<div>' +params[1].value + 'cm<br>'+ '</div>' +
              '</div>';
          tip += '<div style="width: 100px;display: flex;flex-flow: row nowrap;justify-content: space-between">'+
              '<div>' +params[2].marker +' '+ params[2].seriesName+ '</div>' +
              '<div>' +params[2].value + 'cm<br>'+ '</div>' +
              '</div>';
          tip += '<div style="width: 100px;display: flex;flex-flow: row nowrap;justify-content: space-between">'+
              '<div>' +params[3].marker +' '+ params[3].seriesName+ '</div>' +
              '<div>' +params[3].value + 'cm<br>'+ '</div>' +
              '</div>';
        }
        return tip
      },
    },
    grid: {
      //布局
      show: true,
      left: "20px",
      right: "30px",
      bottom: "10px",
      top: "28px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        name: "合计",
        color: "rgba(252,144,16,.7)",
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "rect",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "#FC9010",
                backgroundColor: "rgba(252,144,16,0.1)",
                borderRadius: 6,
                padding: [7, 14],
                borderWidth: 0.5,
                borderColor: "rgba(252,144,16,.5)",
                formatter: "合计：{c}",
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#FC9010",
                shadowColor: "#FC9010",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              },
            },
          ],
        },
      },
      {
        data: yData2,
        type: "line",
        smooth: true,
        name: "左",
        color: "rgba(9,202,243,.7)",
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "rect",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "#09CAF3",
                backgroundColor: "rgba(9,202,243,0.1)",

                borderRadius: 6,
                borderColor: "rgba(9,202,243,.5)",
                padding: [7, 14],
                formatter: "左：{c}",
                borderWidth: 0.5,
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#09CAF3",
                shadowColor: "#09CAF3",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              },
            },
          ],
        },
      },
      {
        data: yData3,
        type: "line",
        smooth: true,
        name: "中",
        color: "rgba(4,241,50,0.7)",
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "rect",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "rgba(82,245,4,0.7)",
                backgroundColor: "rgba(9,243,64,0.1)",

                borderRadius: 6,
                borderColor: "rgba(60,243,9,0.5)",
                padding: [7, 14],
                formatter: "中：{c}",
                borderWidth: 0.5,
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "rgba(82,245,4,0.7)",
                shadowColor: "rgba(82,245,4,0.7)",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              },
            },
          ],
        },
      },
      {
        data: yData4,
        type: "line",
        smooth: true,
        name: "右",
        color: "rgba(243,9,79,0.7)",
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "rect",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "rgba(243,9,79,0.7)",
                backgroundColor: "rgba(243,9,106,0.1)",

                borderRadius: 6,
                borderColor: "rgba(243,9,106,0.5)",
                padding: [7, 14],
                formatter: "右：{c}",
                borderWidth: 0.5,
              },
            },
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "rgba(243,9,79,0.7)",
                shadowColor: "rgba(243,9,79,0.7)",
                shadowBlur: 8,
              },
              label: {
                formatter: "",
              }
            }
          ]
        }
      }
    ]
  }
}

function updateOptions(xData, yData, yData2,yData3,yData4){
  nextTick(() => {
    options.value = {
      xAxis: {
        data: xData,
      },
      series: [
        {
          data: yData,
        },
        {
          data: yData2,
        },
        {
          data: yData3,
        },
        {
          data: yData4,
        }
      ]
    }
  })
}

function clearData(){
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}
</script>

<style scoped lang="scss">

</style>